<template>
  <div class="preferential" v-if="limit">
    <dl class="preferential-radio">
      <dt>{{ t('WALLET.text01') }}：</dt>
      <dd>
        <el-radio-group v-model="accept" @change="handleAccept">
          <el-radio label="1">{{ t('WALLET.text02') }}</el-radio>
          <el-radio label="0">{{ t('WALLET.text05') }}</el-radio>
        </el-radio-group>
      </dd>
    </dl>
    <dl v-if="accept == '1'" class="preferential-content" :class="{'preferential-content-h5': piniaSystem.getIsH5}">
      <img :src="images.rechargeBg" alt="" class="preferential-content-bg">
      <h3>
        <dt>{{ t("WALLET.activity03") }} {{ currentWallet.currencyName }} >= <span>{{limit.drawLowerLimit}}</span></dt>
        <dd><img :src="images.money">{{ currentWallet.currencyName }} +{{limit.investRato}}% {{ t("WALLET.activity04") }}</dd>
      </h3>
    </dl>
    <ul v-if="accept == '1' && piniaUserinfo.getCurrentWallet.currencyId !== '1005'" class="preferential-result">
      <li>{{t('WALLET.text03')}}：{{limit.drawUpperLimit}}</li>
      <li>{{t('WALLET.text04')}}：{{getChargeAmount()}}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="Preferential">
import system from '@/store/system';
import userinfo from '@/store/userinfo';


const images: any = reactive({
  money: new URL(`../../assets/images/wallet/money.png`, import.meta.url).href,
  rechargeBg: new URL(`../../assets/images/wallet/rechargeBg.png`, import.meta.url).href,
});

const piniaSystem:any = system();
const piniaUserinfo:any = userinfo();
const { t } = useI18n();

// 当前钱包
const currentWallet = computed(()=> piniaUserinfo.getCurrentWallet);

const props: any = defineProps({
  accept: {
    type: String,
    default: '0'
  },
  limit: {
    type: Object,
    default: null
  },
  hasOffer: {
    type: Object,
    default: {}
  },
  money: {
    type: [String, Number],
    default: 0
  },
});

const emits = defineEmits(['update:accept']);

const data: any = reactive({
  accept: props.accept
});

const {
  accept,
} = toRefs(data);

watch(() => props.accept, (val, old)=> {
  accept.value = props.accept;
});

const handleAccept = (val: any) => {
  emits('update:accept', val);
}

const getChargeAmount = () => {
  let dataVal = 0
  let data = (Number(props.money)*(Number(props.limit.investRato)/100))
  let recharge = Number(props.money)
  if (recharge < props.limit.drawLowerLimit) {
    dataVal = recharge
  } else {
    if (data > props.limit.drawUpperLimit){
      dataVal = props.limit.drawUpperLimit + recharge
    } else {
      dataVal = recharge + data
    }
  }
  return dataVal.toFixed(2);
}

</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
